<template>
    <div class="s_bg">
        <div class="scd">
            <div class="b_h">
                <div class="name">
                    <img src="./images/icon18.png" alt="">
                    <span>发布方式</span>
                </div>
                <div class="pst">
                    当前所在位置: <a @click.prevent="goHome">首页</a>&gt;<a href="" class="on">我要发布</a>
                </div>
            </div>
            <div class="scd_m">
                <ul class="apply">
                    <li class="clearfix"  >
                        <span class="title">服务项目：</span>
                        <div class="li_m">
                            <select v-model="form.region">
                                <option>请选择类型:</option>
                                <option value="自理老人护理">自理老人护理</option>
                                <option value="介护老人护理">介护老人护理</option>
                                <option value="介护老人护理">介护老人护理</option>
                            </select>
                        </div>
                    </li>
                    <li class="clearfix">
                        <span class="title">姓名：</span>
                        <div class="li_m">
                            <input v-model="form.name" type="text">
                        </div>
                    </li>
                    <li class="clearfix sex" >
                        <span class="title">性别：</span>
                        <div class="li_m">
                            <input name="sex" v-model="form.region" checked="" type="radio" value="" id="boy">
                            <span><label for="boy">先生</label></span>
                            <input name="sex" v-model="form.region" type="radio" value="" id="girl">
                            <span><label for="girl">女士</label></span>
                        </div>
                    </li>
                    <li class="clearfix yzm">
                        <span class="title">发布时间：</span>
                        <div class="li_m">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
                        </div>
                    </li>
                    <li class="clearfix yzm">
                        <span class="title">护工要求：</span>
                        <div class="li_m">
                            <el-input type="textarea" v-model="form.require"></el-input>
                        </div>
                    </li>
                    <li class="clearfix" >
                        <span class="title">手机号码：</span>
                        <div class="li_m">
                            <el-input  type="text" v-model="form.phone"></el-input>
                        </div>
                    </li>
                    <li class="clearfix yzm">
                        <span class="title">验证号码：</span>
                        <div class="li_m">
                            <input v-model="form.verifyPhone" type="text">
                            <a href=""><img src="./images/pic7.jpg" alt=""></a>
                        </div>
                    </li>
                    <li class="clearfix yzm">
                        <span class="title">&nbsp;</span>
                        <div class="li_m">
                            <el-button type="primary">提交发布</el-button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name:'NurseRelease',
         data() {
            return {
                form: {
                name: '',
                region: '',
                sex:'',
                date:'',
                require: '',
                verifyPhone:'',
                phone:''
                }
            }
            },
            methods: {
                onSubmit() {
                    this.$message("发布成功")
                },
                goHome(){
                    this.$router.push('/home')
                }
        }
    }
</script>

<style scoped>
    .s_bg{ width:100%;height: 750px; background:#E6E6E6; padding:25px 0;}
    .scd{ width:96%; max-width:1000px; margin:0px auto; background:#FFF;}
    .scd .b_h,.scd_em .b_h{ width:100%; height:60px; line-height:60px; border-bottom:1px solid #bbb; position:relative; text-align:left;display: flex;}
    .scd .b_h .name,.scd_em .b_h .name{ display:inline-block; *display:inline; zoom:1; height:60px; line-height:60px; color:#FFF; background:#0051AD; padding:0 30px;}
    .scd .b_h .name img,.scd .b_h .name span,.scd_em .b_h .name img,.scd_em .b_h .name span{display:inline-block; *display:inline; zoom:1; height:41px; line-height:41px; vertical-align:top; margin-top:10px; font-size:24px; color:#FFF;}
    .scd .b_h .name img,.scd_em .b_h .name img{ width:41px; height:41px; margin-right:3px;}
    .scd .b_h .pst,.scd_em .b_h .pst{ width:60%; text-align:right; position:absolute; right:10px; top:0px; font-size:14px; color:#555555; height:60px; line-height:60px;}
    .scd .b_h .pst a,.scd_em .b_h .pst a{ font-size:14px; color:#555;}
    .scd .b_h .pst a.on,.scd .b_h .pst a:hover,.scd_em .b_h .pst a.on,.scd_em .b_h .pst a:hover{ color:#0257B9;}
    .scd .scd_m{ width:100%; padding:50px 0;margin-left: -60px;}
    .scd .b_h{ height:auto;}
    .scd .b_h .pst{ position:absolute; text-align:right; width:90%; height:auto; line-height:150%; padding:15px 5%}
    .scd .b_h .name, .scd_em .b_h .name{ width:260px;}
    .apply{ width:890px; margin:0px auto;}
    .apply li{ width:100%; margin-bottom:15px;}
    .apply li .title{ width:45%; display:block; float:left; text-align:right; height:30px; line-height:30px; font-size:16px; color:#555555;}
    .apply li .li_m{ width:54%; float:left; margin-left:1%; text-align:left;}
    .apply li .li_m input,.apply li .li_m select{ width:140px; height:28px; border:1px solid #ccc; padding-left:5px; line-height:28px; margin-right:5px;font-size:14px;}
    .apply li.sex .li_m input{ width:15px; height:15px; vertical-align:top; margin-top:10px;}
    .apply li.sex .li_m span{ display:inline-block; *display:inline; zoom:1;font-size:14px; height:30px; line-height:30px; vertical-align:top; margin-right:20px;}
    .apply li.yzm .li_m img{ width:85px; height:28px; vertical-align:top;margin-top:6px}
    .apply li .li_m .btn{ width:90px; height:30px; line-height:30px; margin:0px; border:0px; color:#FFF; text-align:center; padding:0px; font-size:16px; cursor:pointer;}
    .scd_em{ width:100%; max-width:1000px; margin:0px auto;}
    .scd_em .scd_ml{ width:210px; float:left; overflow:hidden;}
    .scd_em .scd_mr{ width:750px; float:right; background:#FFF;}
    .scd_em .b_h .name{ width:100%;}
    .scd_em .scd_ml .b_h{ border-bottom:0px;}
    .scd_ml ul{ width:100%; background:#FFF;}
    .scd_ml ul li{ width:100%; height:45px; text-align:center; line-height:45px;}
    .scd_ml ul li a{ display:block; width:100%; height:45px; line-height:45px; text-align:center; font-size:18px; color:#555555;}
    .scd_ml ul li.now{ background:#0062D1;}
    .scd_ml ul li.now a{ color:#FFF;}
    .scd_ml .ads{ width:100%; margin-top:10px;}
    .scd_ml .ads img{ width:100%; height:auto; vertical-align:top;}
    a {
	text-decoration: none;
    }
    ol, ul {
        list-style: none;
    }

/*通用父子盒子嵌套浮动问题解决，开始*/
.clear {
	margin: 0px auto;
	width: 100%;
	height: 1px;
	font-size: 1px;
	clear: both;
	background: none;
	overflow: hidden;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
</style>